<template>
  <el-table :data="tableData" stripe :header-cell-style="{ background: '#F9F9F9' }" @selection-change="handleSelectionChange" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="账号名称" align="left">
      <template #default="scope">
        {{ scope.row.name }}
        <span :class="scope.row.sex == 1 ? 'isMale' : 'isMale isfeMale'">{{ scope.row.sex == 1 ? '男' : '女' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="手机号" align="left" width="300"/>
    <el-table-column prop="name" label="账号角色" align="left">
      <template #default="scope">
        {{ scope.row.account_type == 1 ? '主账号' : scope.row.role.length > 0 ? scope.row.role[0].name : '-' }}
        <!-- {{scope.row.role.length>0?scope.row.role[0].name:'-'}} -->
      </template>
    </el-table-column>
    <el-table-column prop="department" label="部门" align="left">
      <template #default="scope">
        <div v-if="scope.row.department.length > 0">
          <span v-for="(item, index) in scope.row.department" :key="index">
            <el-tag size="small" class="form-tags" type="warning">{{ item.name }}</el-tag>
          </span>
        </div>
        <div v-else>-</div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="绑定企微员工" align="left">
      <template #default="scope">
        {{ scope.row.work_user ? scope.row.work_user.name : '-' }}
      </template>
    </el-table-column>
    <el-table-column prop="status_name" label="状态" align="left" />
    <el-table-column prop="created_at" label="添加时间" align="left" />
    <el-table-column fixed="right" label="操作" align="left">
      <template #default="scope">
        <el-link v-auth="'EDIT'" class="form-link" type="warning" :underline="false" @click="countDetail(scope.row, 1)">修改</el-link>
        <el-link v-auth="'OPEN_PAUSE'" v-if="scope.row.status == 1" class="form-link" type="warning" :underline="false" @click="disableOpen(scope.row)">禁用</el-link>
        <el-link v-auth="'OPEN_PAUSE'" v-if="scope.row.status == 2" class="form-link" type="warning" :underline="false" @click="disableOpen(scope.row)">开启</el-link>
        <el-link v-auth="'VIEW_DETAIL'" class="form-link" type="warning" :underline="false" @click="countDetail(scope.row, 2)">详情</el-link>
        <el-link v-auth="'RESET_PASSWORD'" class="form-link" type="warning" :underline="false" @click="newPassword(scope.row)">重置密码</el-link>
        <el-link v-auth="'EDIT_PERMISSION'" class="form-link" type="warning" :underline="false" @click="changePermission(scope.row)">修改权限</el-link>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:currentPage="pagination.currentPage" :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper" :total="pagination.total" @current-change="handleCurrentChange"> </el-pagination>
</template>
<script setup lang="ts">
import { ElTable, ElPagination, ElButton, ElTableColumn, ElLink, ElMessageBox, ElMessage } from 'element-plus'
import { disableAccount } from '@/api/sub'
const emit = defineEmits({
  changeCurrent: null,
  handleDetail: null,
  refreshTable: null,
  handlePassword: null,
  handlePermission: null
})
defineProps(['tableData', 'pagination'])
const handleCurrentChange = (value: number) => {
  emit('changeCurrent', value)
}
const handleClick = () => {}
const handleSelectionChange = () => {}
const countDetail = (value: any, type: number) => {
  emit('handleDetail', value, type)
}
//启用禁用
const disableOpen = (data: any) => {
  const params = {
    sub_account_id: data.id,
    status: data.status == 1 ? 2 : 1
  }
  ElMessageBox({
    title: '提示',
    message: `是否${data.status == 1 ? '禁用' : '启用'}【${data.name}】?`,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    type: 'warning'
  })
    .then(() => {
      disableAccount(params).then((data: any) => {
        ElMessage({
          message: `${data.status == 1 ? '禁用' : '启用'}成功`,
          type: 'success'
        })
        emit('refreshTable')
      })
    })
    .catch(() => {})
}
//重置密码
const newPassword = (data: any) => {
  emit('handlePassword', data)
}
//修改权限
const changePermission = (data: any) => {
  emit('handlePermission', data)
}
</script>
<style lang="scss" scoped>
.form-link {
  margin-right: 10px;
}
.isMale {
  width: 18px;
  line-height: 18px;
  border-radius: 50%;
  display: inline-block;
  color: #ffffff;
  background-color: #75ddf4;
  text-align: center;
}
.isfeMale {
  background-color: #f474bf;
}
.form-tags {
  margin: 0 10px 10px 0;
}
</style>
